<template>
  <Page title="家校联系">
    <template #navBarCustom>
      <div class=""></div>
    </template>
    <template #content>
      <div class="w-full h-full p-20px box-border flex" style="height: 100%; background: #f4f7fb">
        <div class="contacts-wrap bg-white mr-20px overflow-scroll">
          <ParentList :userImId="userImId" :list="contacts" @change="changeUserImId" />
        </div>

        <div class="chat-wrap flex-1 flex flex-col" :class="userImId ? '' : 'invisible'">
          <Messages ref="messages" :data="messages" />
          <Footer
            :current-contact="currentContact"
            :is-show-recording-dialog="isShowRecordingDialog"
            @change="changeIsShowRecordingDialog"
          />
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/index'
import IM_Minxin from '@/mixin/im'
import ParentList from './components/parent-list'
import Messages from './components/messages'
import Footer from './components/footer'
import { mapGetters } from 'vuex'
import { MODULE_ID } from '@/store/modules/module-use'

export default {
  components: {
    Page,
    ParentList,
    Messages,
    Footer
  },
  mixins: [IM_Minxin],
  data() {
    return {
      userImId: '',
      isShowRecordingDialog: false
    }
  },
  computed: {
    ...mapGetters(['contacts']),
    currentContact() {
      const contact = this.contacts.find((c) => c.userId === this.userImId)
      if (this.userImId) {
        const { userId } = contact
        this.$im.clearUnreadCount(1, userId)

        if (android) {
          android.clearMsg(userId)
        }
      }

      return contact
    },
    messages() {
      if (!this.currentContact) return []

      return this.currentContact.messages
    }
  },
  watch: {
    messages(newVal) {
      this.$refs.messages.setScrollToLower()
    }
  },
  created() {},
  mounted() {
    // 初始化模块使用记录
    this.$store.commit('setCurrentModuleUse', {
      vm: this._self,
      type: MODULE_ID.CONTACT,
      subjectId: ''
    })
  },
  methods: {
    changeUserImId(userImId) {
      this.userImId = userImId
    },
    changeIsShowRecordingDialog(isShowRecordingDialog) {
      this.isShowRecordingDialog = isShowRecordingDialog
    }
  }
}
</script>

<style lang="scss" scoped>
.contacts-wrap {
  width: 304px;
  height: 100%;
  border-radius: 16px;
}

.chat-wrap {
  border-radius: 16px;
  overflow: hidden;
}
</style>
